<template>
	<view class="progress" :style="{zIndex:zIndex}">
		<view class="progress-bar-one"></view>
		<view class="progress-bar-one"></view>
		<view class="progress-bar-two"></view>
		<view class="progress-bar-three"></view>
		<view class="progress-bar-four"></view>
		<view class="progress-bar-five"></view>
		<view class="wear-pointer" :style="{ left: `calc(-2.5vw + ${wear * 100}%)` }">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			wear: {
				type: String,
				default: ""
			},
			zIndex: {
				type: String,
				default: "-1"
			}
		}
	}
</script>

<style lang="scss" scoped>
	.progress {
		width: 100%;
		height: 5px;
		display: flex;
		position: relative;

		.wear-pointer {
			width: 5vw;
			height: 3vw;
			position: absolute;
			left: -2.5vw;
			top: -3vw;
			background-image: url("@/static/progess/arrow.png");
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
		}

		.progress-bar-one {
			width: 7%;
			height: 100%;
			background-color: green;
		}

		.progress-bar-two {
			width: 8%;
			height: 100%;
			background-color: #5cb85c;
		}

		.progress-bar-three {
			width: 23%;
			height: 100%;
			background-color: #f0ad4e;
		}

		.progress-bar-four {
			width: 7%;
			height: 100%;
			background-color: #d9534f;
		}

		.progress-bar-five {
			width: 55%;
			height: 100%;
			background-color: #993A38;
		}
	}
</style>